<template>
  <!-- 自定义删除组件 -->
  <el-dialog
    v-model="visible"
    :title="title"
    width="420px"
    :close-on-click-modal="false"
    center
  >
    <div class="delete-content">
      {{ content }}
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="danger" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const title = ref('删除确认')
const content = ref('')
let resolveFn = null

const show = (msg, t = '删除确认') => {
  content.value = msg
  title.value = t
  visible.value = true
  return new Promise((resolve) => {
    resolveFn = resolve
  })
}

const handleConfirm = () => {
  visible.value = false
  resolveFn(true)
}

defineExpose({ show })
</script>

<style scoped>
.delete-content {
  text-align: center;
  font-size: 16px;
  padding: 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.dialog-footer .el-button {
  min-width: 100px;
  margin: 0 15px;
}
</style>